﻿<DemoPageSectionComponent Id="Editors-CheckBox-Overview" ShowSizeMode="@true">
    <ChildContentWithParameters Context="Params">
        <div class="cw-320">
            <fieldset>
                <legend class="@GetLabelCssClass(Params.SizeMode)">Choose your new car options:</legend>
                <DxCheckBox @bind-Checked="@SelectAllState"
                            CssClass="dx-demo-select-all-checkbox"
                            SizeMode="Params.SizeMode">
                    Select All
                </DxCheckBox>
                <div class="dx-demo-price-list-content">
                    <div class="dx-demo-row">
                        <DxCheckBox @bind-Checked="@Multimedia" SizeMode="Params.SizeMode">Multimedia</DxCheckBox>
                        <div class="@GetCssClass(Multimedia)">$130</div>
                    </div>
                    <div class="dx-demo-row">
                        <DxCheckBox @bind-Checked="@AirConditioning" SizeMode="Params.SizeMode">Air conditioning</DxCheckBox>
                        <div class="@GetCssClass(AirConditioning)">$800</div>
                    </div>
                    <div class="dx-demo-row">
                        <DxCheckBox @bind-Checked="@ParkingSensors" SizeMode="Params.SizeMode">Parking camera</DxCheckBox>
                        <div class="@GetCssClass(ParkingSensors)">$400</div>
                    </div>
                    <div class="dx-demo-row">
                        <DxCheckBox @bind-Checked="@HeatedSeats" SizeMode="Params.SizeMode">Heated seats</DxCheckBox>
                        <div class="@GetCssClass(HeatedSeats)">$230</div>
                    </div>
                </div>
            </fieldset>
            <div class="@GetLabelCssClass(Params.SizeMode) dx-demo-total dx-demo-row">
                <strong>Total price:</strong>
                <strong class="@GetCssClass(true)">$@GetTotalPrice()</strong>
            </div>
        </div>
    </ChildContentWithParameters>

    @code{
        CarOptions options = CarOptions.AirConditioning | CarOptions.HeatedSeats;

        bool? SelectAllState {
            get {
                if(options == CarOptions.None)
                    return false;
                if(options == CarOptions.All)
                    return true;
                return null;
            }
            set {
                if(value.HasValue)
                    options = value.Value ? CarOptions.All : CarOptions.None;
            }
        }

        bool AirConditioning {
            get => options.HasFlag(CarOptions.AirConditioning);
            set => SetOption(value, CarOptions.AirConditioning);
        }

        bool Multimedia {
            get => options.HasFlag(CarOptions.Multimedia);
            set => SetOption(value, CarOptions.Multimedia);
        }

        bool ParkingSensors {
            get => options.HasFlag(CarOptions.ParkingSensors);
            set => SetOption(value, CarOptions.ParkingSensors);
        }

        bool HeatedSeats {
            get => options.HasFlag(CarOptions.HeatedSeats);
            set => SetOption(value, CarOptions.HeatedSeats);
        }

        void SetOption(bool value, CarOptions enumValue) {
            if(value)
                options |= enumValue;
            else
                options &= ~enumValue;
        }

        decimal GetTotalPrice() {
            decimal price = 0;
            price += Multimedia ? 130 : 0;
            price += AirConditioning ? 800 : 0;
            price += ParkingSensors ? 400 : 0;
            price += HeatedSeats ? 230 : 0;
            return price;
        }

        string GetCssClass(bool selected) => selected ? string.Empty : " dx-demo-text-strikethrough";
        string GetLabelCssClass(SizeMode sizeMode) {
            var result = "dx-demo-label";
            if(sizeMode != SizeMode.Medium)
                result += sizeMode == SizeMode.Large ? " dx-demo-large" : " dx-demo-small";
            return result;
        }

        [Flags]
        enum CarOptions {
            None = 0x0,
            AirConditioning = 0x1,
            Multimedia = 0x2,
            ParkingSensors = 0x4,
            HeatedSeats = 0x8,
            All = AirConditioning | Multimedia | ParkingSensors | HeatedSeats
        }

    }
</DemoPageSectionComponent>
